<template>
    <div>
        <basic-container>
            <div class="app-container">
                <el-form :model="queryParams" ref="queryForm" size="small" :inline="true">
                    <el-form-item label="日期查询">
                        <el-date-picker v-model="value" type="daterange" :clearable="false" value-format="yyyy-MM-dd"
                            range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                        </el-date-picker>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                    </el-form-item>
                </el-form>
                <div style="display: flex;">
                    <el-table :data="menuList" style="margin-top: 30px;flex: 1;">
                        <el-table-column prop="aircraft" label="机种名称">
                            <template slot-scope="scope">
                                <div style="cursor: pointer;" @click="handleUpdate(scope.row, scope.$index)"
                                    :class="{ 'activeClass': NubIndex == scope.$index }">{{
                                        scope.row.aircraft }}
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="name" label="工单名称" align="center" style="cursor: pointer;">
                            <template slot-scope="scope">
                                <div style="cursor: pointer;" @click="handleUpdate(scope.row, scope.$index)"
                                    :class="{ 'activeClass': NubIndex == scope.$index }">{{
                                        scope.row.name }}
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="status" label="工单状态" align="center" style="cursor: pointer;">
                            <template slot-scope="scope">
                                <div style="cursor: pointer;" @click="handleUpdate(scope.row, scope.$index)"
                                    :class="{ 'activeClass': NubIndex == scope.$index }">{{
                                        scope.row.status }}
                                </div>
                            </template>
                        </el-table-column>
                    </el-table>
                    <template>
                        <el-table :data="tableData" v-loading="loading" element-loading-text="拼命加载中"
                            element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)"
                            style=" margin:30px; flex: 2;">
                            <el-table-column prop="sequence" label="产品编码" align="center">
                                <template slot-scope="scope">
                                    <div style="cursor: pointer;" @click="handleAdd(scope.row, scope.$index)"
                                        :class="{ 'activeClass': produInd == scope.$index }">{{
                                            scope.row.sequence }}
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column prop="mark" label="产品状态" align="center">
                                <template slot-scope="scope">
                                    <div style="cursor: pointer;" @click="handleAdd(scope.row, scope.$index)"
                                        :class="{ 'activeClass': produInd == scope.$index }">{{
                                            scope.row.mark }}
                                    </div>
                                </template>
                            </el-table-column>
                        </el-table>
                    </template>

                    <template>
                        <el-table :data="productData" v-loading="towLad" element-loading-text="拼命加载中"
                            element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)"
                            style="width: 100%; height: 70vh; margin-top: 30px; flex: 3;margin-left: 20px;">
                            <el-table-column type="expand">
                                <template slot-scope="props">
                                    <el-form label-position="left" inline class="demo-table-expand">
                                        <el-form-item label="设备信息">
                                            <div class="message">
                                                <div v-for="(item, index) in props.row.title" :key="index"
                                                    style="margin: 0 10px;">
                                                    {{ item }}
                                                </div>
                                            </div>
                                        </el-form-item>
                                        <div>
                                            <el-form-item label="设备数据">
                                                <div style="overflow: auto;height: 40vh;">
                                                    <div v-for="(item, index) in props.row.message" :key="index"
                                                        style="margin: 0 10px;">
                                                        <span v-for="(chat, index) in item" :key="index"
                                                            style="display: inline-block;width: 60px; text-align: center;">{{
                                                                chat }}</span>
                                                    </div>
                                                </div>
                                            </el-form-item>
                                        </div>
                                    </el-form>
                                </template>
                            </el-table-column>

                            <!-- 其他列 -->
                            <el-table-column prop="numbers" label="加工次数" align="center">
                            </el-table-column>
                            <el-table-column prop="serials" label="设备编号" align="center">
                            </el-table-column>
                            <el-table-column prop="tf_name" label="设备名称" align="center">
                            </el-table-column>
                            <!-- <el-table-column prop="tk_name" label="工单名称" align="center">
                            </el-table-column> -->
                            <el-table-column prop="time" label="采集时间" align="center">
                            </el-table-column>
                            <el-table-column prop="error" label="不合格原因" align="center" :show-overflow-tooltip="true">
                            </el-table-column>
                        </el-table>
                    </template>
                </div>
                <div style="display: flex;">
                    <div style="flex: 1;">
                        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.index"
                            :limit.sync="queryParams.size" @pagination="getList" />
                    </div>
                    <div style="flex: 2;">
                        <pagination v-show="toNum > 0" :total="toNum" :page.sync="otherQuery.index"
                            :limit.sync="otherQuery.size" @pagination="handleUpdate" />
                    </div>
                    <div style="flex: 3;"></div>
                </div>
            </div>
        </basic-container>
    </div>
</template>
    
<script>
import { addtaskList, getdetails, getlistAil } from "@/api/exemplar";


export default {

    data() {
        return {
            NubIndex: null,
            produInd: null,
            tabPosition: 'left',
            tableData: [],
            productData: [],
            // 遮罩层
            propObj: {
                multiple: true,
                value: 'mark',
                label: 'label',
                children: 'children'
            },
            loading: false,
            towLad: false,
            // 显示搜索条件
            showSearch: true,
            value1: [],
            total: 1,
            inMess: [],
            menuList: [],
            options: [{
                value: '1',
                label: '生效中'
            }, {
                value: '2',
                label: '禁用'
            }, {
                value: '3',
                label: '审核中'
            }],
            // 弹出层标题
            title: "",
            // 是否显示弹出层
            open: false,
            toNum: 0,
            // 是否展开，默认全部折叠
            isExpandAll: false,
            // 重新渲染表格状态
            refreshTable: true,
            otherQuery: {
                task_id: null,
                is_page: 1,
                index: 1,
                size: 10
            },
            // 查询参数
            queryParams: {
                index: 1,
                start: null,
                finish: null,
                size: 10,
            },
            value: null,
            // 表单参数
            form: {},
            // 表单校验
            rules: {
                role: [
                    { required: true, message: "角色名称不能为空", trigger: "blur" }
                ],
                describe: [
                    { required: true, message: "角色描述不能为空", trigger: "blur" }
                ],
            }
        }
    },
    created() {
        this.getList();
        var today = new Date();
        var year = today.getFullYear();
        var month = today.getMonth() + 1; // 月份从0开始，所以要加1
        var day = today.getDate();
        // 格式化日期
        var formattedDate = year + '-' + (month < 10 ? '0' + month : month) + '-' + (day < 10 ? '0' + day : day);
        console.log(formattedDate);
        this.queryParams.start = formattedDate
        this.queryParams.finish = formattedDate
        this.value = [formattedDate, formattedDate]
    },
    computed: {

    },
    watch: {
        value(newDate) {
            if (!newDate) {
                this.queryParams.start = null
                this.queryParams.finish = null
                this.getList()

            }

        }
    },
    methods: {

        /** 查询菜单列表 */
        getList() {
            this.produInd = null
            this.NubIndex = null
            this.loading = true;
            addtaskList(this.queryParams).then(response => {
                this.menuList = response.data.data
                this.total = response.data.total;
                this.loading = false;
                if (this.menuList.length == 0) {
                    this.produInd = null
                    this.NubIndex = null
                    this.productData = []
                    this.tableData = []
                }
            });
        },
        handleAdd(row, index) {
            this.produInd = index
            this.towLad = true;
            let seq = {
                sequence: row.sequence
            }
            setTimeout(() => {
                getlistAil(seq).then(res => {
                    this.productData = res.data.data
                    this.towLad = false;
                });
            }, 500);
        },
        handleUpdate(row, index) {
            this.NubIndex = index == undefined ? sessionStorage.getItem('indexId') : index
            this.otherQuery.task_id = row.task_id == undefined ? sessionStorage.getItem('taskId') : row.task_id
            this.loading = true;
            this.produInd = null
            this.productData = []
            this.tableData = []
            setTimeout(() => {
                getdetails(this.otherQuery).then(res => {
                    this.toNum = res.data.total
                    this.tableData = res.data.data
                    this.loading = false;
                });
            }, 500);
            sessionStorage.setItem('taskId', this.otherQuery.task_id);
            sessionStorage.setItem('indexId', this.NubIndex);
        },
        handleQuery() {

            this.value = this.value == null ? [] : this.value
            this.queryParams.start = this.value.length > 0 ? this.value[0] : null
            this.queryParams.finish = this.value.length > 0 ? this.value[1] : null
            this.getList();
        },
    }
};
</script>
    
<style lang="scss" scoped>
.app-container .el-tabs__item {
    height: 80px !important;
    line-height: 80px;
}

.app-container .el-tabs__header {
    height: 80vh !important;
}

.message {
    display: flex;
    width: 100%;
}

.activeClass {
    color: red;
}
</style>
    